<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2025-02-28 16:31:06
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2025-03-06 10:44:10
 * @FilePath: \global-brain\global-brain-admin\src\components\Lee\Editor\src\LeeEditor.vue
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import {
  onBeforeUnmount,
  ref,
  shallowRef
  //onMounted
} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  components: { Editor, Toolbar },
  // 获取v-model绑定的 valueHtml 变量
  // props: {
  //   value: {
  //     type: String,
  //     default: ''
  //   }
  // },
  props: {
    // 取消注释 props
    modelValue: {
      // Vue3 默认使用 modelValue 作为 v-model 的 prop
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'], // 声明 emits
  setup(props, { emit }) {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // const valueHtml = ref()
    const valueHtml = ref(props.modelValue) // 初始值来自 props

    // 内容 HTML 获取v-model绑定的 valueHtml 变量
    // valueHtml.value = props.value

    // 模拟 ajax 异步获取内容
    // onMounted(() => {
    //   setTimeout(() => {
    //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    //   }, 1500)
    // })

    const toolbarConfig = {
      toolbarKeys: [
        // 一些常用的菜单 key
        'bold', // 加粗
        'italic', // 斜体
        'through' // 删除线
        // 'underline', // 下划线
        // 'bulletedList', // 无序列表
        // 'numberedList', // 有序列表
        // 'color', // 文字颜色
        // 'fontSize', // 字体大小
        // 'lineHeight', // 行高
        // 'uploadImage', // 上传图片
        // 'delIndent', // 缩进
        // 'indent', // 增进
        // 'deleteImage', //删除图片
        // 'divider', // 分割线
        // 'justifyCenter', // 居中对齐
        // 'justifyJustify', // 两端对齐
        // 'justifyLeft', // 左对齐
        // 'justifyRight', // 右对齐
        // 'undo', // 撤销
        // 'redo', // 重做
        // 'clearStyle' // 清除格式
      ]
    }
    const editorConfig = {
      placeholder: '请输入内容...23213123',
      // uploadImgServer: 'http://localhost/global-brain/api/shop_api/index.php/api/file/upload',
      MENU_CONF: {
        uploadImage: {
          server: 'http://localhost/global-brain/api/shop_api/index.php/api/file/upload', // 上传图片的服务器地址
          fieldName: 'file', // 文件字段名
          meta: {
            // code: 'adminUpload' // 可选，上传时携带的额外参数
          },
          headers: {
            authorization: 'Bearer your-token' // 可选，上传时携带的请求头
          },
          timeout: 5 * 1000, // 可选，超时时间
          maxFileSize: 2 * 1024 * 1024, // 可选，最大文件大小
          maxNumberOfFiles: 5, // 可选，最大上传数量
          onBeforeUpload(file) {
            // 可选，上传前的钩子函数
            console.log('beforeUpload', file)
            return true
          },
          onProgress(progress) {
            // 可选，上传进度的钩子函数
            console.log('progress', progress)
          },
          onSuccess(file, res) {
            // 可选，上传成功的钩子函数
            console.log('success', file, res)
          },
          onFailed(file, err, res) {
            // 可选，上传失败的钩子函数
            console.log('failed', file, err, res)
          },
          onError(err, res) {
            // 可选，上传错误的钩子函数
            console.log('error', err, res)
          }
        }
      }
    }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    // const handleCreated = (editor) => {
    //   editorRef.value = editor // 记录 editor 实例，重要！
    //   // console.log(editor)
    // }
    // 添加内容变化监听
    const handleChange = (editor) => {
      const html = editor.getHtml()
      // console.log('html', html)
      // valueHtml.value = html
      emit('update:modelValue', html) // 触发 v-model 更新
    }

    // 创建完毕时
    const handleCreated = (editor) => {
      editorRef.value = editor
      // editor.on('change', () => handleChange(editor)) // 监听编辑器变化
    }

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      handleChange
    }
  }
}
</script>

<template>
  <div style="border: 1px solid #ccc">
    <!-- style="border-bottom: 1px solid #ccc" -->
    <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @on-created="handleCreated"
      @change="handleChange"
    />
  </div>
</template>
